<template>
    <SubDemo v-model="msg"></SubDemo>
    <!--v-for :指令
    列表渲染得时候使用：
    v-for="item in arr"  item是别名  in 相当于java 高级for循环中指定类型  arr 是原数组
    v-for="(item,index) in arr" :key="item.id"  index 代表索引 :key 代表唯一标识 一般以id为主
    -->
    <span>学生姓名</span>
    <ul>
        <li v-for="(item,index) in stu">{{ index }}----{{ item }}</li>
    </ul>
    <span>学生个人详细</span>
    <ul>
        <li v-for="(item,index) in stuArr" :key="item.id" >
        <span>{{ item.name }} </span>&nbsp;
        <span>{{ item.age }} </span>&nbsp;
        <span>{{ item.sex }} </span>&nbsp;
        <span>{{ item.aihao }} </span>
        </li>
    </ul>
    <span>老师得信息</span>
    <div v-for="(value ,key) in teh" :key="value" >
    {{ key }} == {{ value }}
    </div>

</template>
<script setup>
import { reactive, ref } from 'vue';
import SubDemo from './SubDemo.vue';
const msg=ref("请输入对应得值")
const stu=ref(['唐浩辰','小灵儿','光头盾'])
const stuArr = ref([
    {
        id:101,
        name: '萧炎',
        age: '18',
        sex: '男',
        aihao:'萧薰儿'
    },
    {
         id: 102,
        name: '萧薰儿',
        age: '20',
        sex: '女',
        aihao: '萧炎'
    },
    {
         id: 103,
        name: '美杜莎',
        age: '24',
        sex: '女',
        aihao: '萧炎'
    },
    {
         id: 104,
        name: '小医仙',
        age: '18',
        sex: '女',
        aihao: '萧炎'
    }
])
/**
 * ref 读取得是简易类型 比如 数组  数组对象 单一运算
 * reactive 用来读取复杂类 例如 对象  对象数组
 */


const teh = reactive(
    {
        name: "药老",
        age: 98,
        DW: "斗圣"
    }
)


</script>